<script setup>
import { artGetChannelsService } from '@/api/article';
import {ref} from 'vue'

const channelList =ref([])

const getChannelList=async ()=>{
  const res =await artGetChannelsService()
  channelList.value=res.data.data
}

getChannelList()

//接收父组件元素,v-model 默认绑定用modelValue
defineProps({
  modelValue:{
    type:[Number,String]
  }
})

//update:modelValue 是一个有格式要求的事件名，它是 Vue 3 用于 v-model 双向绑定的约定标准。
const emit=defineEmits(['update:modelValue'])

</script>
<template>
  <el-select style="width: 200px"
             :modelValue="modelValue"
             @update:modelValue="emit('update:modelValue',$event)"
  >
                <!-- el-option 中的 label 是展示给用户看的,value 提交给后台的 -->
                <el-option 
                v-for="channel in channelList"
                :key="channel.id"
                :label="channel.cate_name"
                :value="channel.id"
                 ></el-option>
                <!-- <el-option lable="体育" value="137"></el-option> -->
    </el-select>   
</template>